<template>
	<view class="_abbr">
		<view class="user">
			<view class="main">
				<view class="content">
					<u--image :src="userinfo.user.avatar" width="72px" height="72px" shape="circle"></u--image>
					<view class="user1">
						<view class="username">
							{{userinfo.user.userName}}
						</view>
						<view class="remark">
							{{userinfo.roleGroup || ''}}
						</view>
					</view>
				</view>
				<view class="btn">
					<u-button type="warning" text="退出" :plain="true" @click="logout"></u-button>
				</view>
			</view>
		</view>
		<view class="total-money">
			<u-tabs :list="currentMoney" :current="currentTab" @change="tabChange"></u-tabs>
			<view class="current">￥{{settlementDetail.dayMoney}}/￥{{settlementDetail.monthMoney}}</view>
		</view>
		<view v-if="currentTab === 0">
			<view v-for="(item, index) in settlementDetailList" :key="index">
				<view class="title">
					<view>{{item.settlementType || ''}}</view>
					<view>{{item.createTime || ''}}</view>
				</view>
				<view class="detail">
					<view>
						<view class="item">
							{{item.settlementFrom || ''}}
						</view>
						<view class="item1">
							{{item.workOrderId}}
						</view>
						<view class="item1">
							{{item.deviceQr}}
						</view>
					</view>
					<view :style="{ color: (item.settlementType === '赔了一笔') ? 'red' : 'black' }" class="money">
						￥{{item.settlementMoney}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="currentTab === 1">
			<view v-for="(item, index) in settlementDetailMonthList" :key="index">
				<view class="title">
					<view>{{item.settlementType || ''}}</view>
					<view>{{item.createTime || ''}}</view>
				</view>
				<view class="detail">
					<view>
						<view class="item">
							{{item.settlementFrom || ''}}
						</view>
						<view class="item1">
							{{item.workOrderId}}
						</view>
						<view class="item1">
							{{item.deviceQr}}
						</view>
					</view>
					<view :style="{ color: (item.settlementType === '赔了一笔') ? 'red' : 'black' }" class="money">
						￥{{item.settlementMoney}}
					</view>
				</view>
			</view>
		</view>
		<view class="footer"></view>
		<view class="tabbar">
			<tabbar value="2"></tabbar>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request.js"
	export default {
		name: 'user',
		data() {
			return {
				settlementDetail: {},
				userinfo: {}, //用户信息
				currentMoney: [ {
					name: '今日收入'
				}, {
					name: '当月收入'
				}],
				currentTab: 0,
				settlementDetailList: [] ,// 收入明细
				settlementDetailMonthList: [] // 月收入
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync("userProfile");
			this.getSettlementDetail()
			this.getSettlementDetailMonth()
		},
		methods: {
			// 切换
			tabChange(item) {
				this.currentTab = item.index
				if (this.currentTab === 0) {
					this.getSettlementDetail()
				} else {
					this.getSettlementDetailMonth()
				}
			},
			// 获取收入明细
			getSettlementDetail() {
				// 获取当前日期对象
				const date = new Date();
				const startTime = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0).getTime() / 1000;
				const endTime = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59).getTime() / 1000;
				const dateObj = new Date(startTime * 1000);
				const dateObj1 = new Date(endTime * 1000);
				// 将时间调整到北京时间
				dateObj.setUTCHours(dateObj.getUTCHours() + 8);
				dateObj1.setUTCHours(dateObj1.getUTCHours() + 8);
				// 格式化输出
				const formattedStartTime = dateObj.toISOString().slice(0, 19).replace('T', ' ');
				const formattedEndTime = dateObj1.toISOString().slice(0, 19).replace('T', ' ');
				console.log('Formatted Start Time:', formattedStartTime);
				console.log('Formatted End Time:', formattedEndTime);
				request({
					url: 'system/SettlementDetail/list',
					method: "GET",
					data: {
						startTime: formattedStartTime,
						endTime: formattedEndTime,
						settlementUserName: this.userinfo.user.userName,
						settlementUserId: this.userinfo.user.userId
					}
				}).then(res => {
					this.settlementDetailList = res.rows;
					this.settlementDetail.dayMoney = this.settlementDetailList.reduce((acc, current) => acc + parseFloat(current.settlementMoney), 0);
				})
			},
			// 获取月收入明细
			getSettlementDetailMonth() {
				const currentDate = new Date();
				const startOfMonth = new Date(Date.UTC(currentDate.getFullYear(), currentDate.getMonth(), 1, 0, 0, 0));
				const startDateTime = startOfMonth.toISOString().slice(0, 19).replace('T', ' ');
				console.log('当前月份的起始时间:', startDateTime); // 输出: 2024-07-01 00:00:00
				
				// 获取当前月份的结束时间
				const endOfMonth = new Date(Date.UTC(currentDate.getFullYear(), currentDate.getMonth() + 1, 0, 23, 59, 59));
				const endDateTime = endOfMonth.toISOString().slice(0, 19).replace('T', ' ');
				console.log('当前月份的结束时间:', endDateTime); // 输出: 2024-07-31 23:59:59

				
				request({
					url: 'system/SettlementDetail/list',
					method: "GET",
					data: {
						startTime: startDateTime,
						endTime: endDateTime,
						settlementUserName: this.userinfo.user.userName,
						settlementUserId: this.userinfo.user.userId
					}
				}).then(res => {
					this.settlementDetailMonthList = res.rows
					this.settlementDetail.monthMoney = this.settlementDetailMonthList.reduce((acc, current) => acc + parseFloat(current.settlementMoney), 0);
				})
			},
			// 退出
			logout() {
				uni.clearStorageSync();
				uni.reLaunch({
					url: "/pages/user/login"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		height: 100px;
		background-color: #5290ff;
		// position: relative;
		.main {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0px 10px 10px 10px;
			padding-top: 20px;
			.content {
				display: flex;
				align-items: center;
				.user1 {
					display: flex;
					flex-direction: column;
					margin-left: 20px;
					.username {
						font-size: 20px;
						color: #ffffff;
						font-weight: 600;
					}
					.remark {
						margin-top: 6px;
						color: #bdd5ff;
						font-size: 12px;
					}
				}
			}
			.btn {
				
			}
		}
	}
	.total-money {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px 10px 10px 2px;
		.current {
			font-size: 18px;
			font-weight: 600;
		}
	}
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 6px 10px 0px 10px;
		padding: 6px 10px 0px 10px;
		color: #a6a4a4;
		font-size: 12px;
	}
	.detail {
		display: flex; 
		align-items: center; 
		justify-content: space-between;
		background-color: #f8f8f8;
		margin: 10px;
		padding: 10px;
		.item {
			margin: 6px 0;
			font-size: 12px;
		}
		.item1 {
			margin: 6px 0;
			color: #a6a4a4;
			font-size: 12px;
		}
		.money {
			font-size: 24px;
			font-weight: 600;
			padding-right: 10px;
		}
	}
	.footer {
		height: 80px;
	}
</style>